<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      table {
        width: 500px;
        margin: 100px auto;
        border-collapse: collapse;
        text-align: center;
      }

      td,
      th {
        border: 1px solid #333;
      }

      thead tr {
        height: 40px;
        background-color: #ccc;
      }
    </style>
  </head>

  <body>
    
    <table cellspacing="0" style="width: 1000px;">
      <caption>
        姓名：<input type="text" name="" id="txtName" />
        科目：<input type="text" name="" id="subject" />
        成绩：<input type="text" name="" id="score" />
        <button id="add">添加学员</button>
      </caption>
      <thead>
        <tr>
          <th>姓名</th>
          <th>科目</th>
          <th>成绩</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <script>
      // 1.先去准备好学生的数据
      var datas = [
        {
          name: '魏璎珞',
          subject: 'JavaScript',
          score: 100,
          a: '<a href="javascript:;" class="del">删除</a>&nbsp;&nbsp;&nbsp;<a href="javascript:;" class="edit">编辑</a>',
        },
        {
          name: '弘历',
          subject: 'JavaScript',
          score: 98,
          a: '<a href="javascript:;" class="del">删除</a>&nbsp;&nbsp;&nbsp;<a href="javascript:;" class="edit">编辑</a>',
        },
        {
          name: '傅恒',
          subject: 'JavaScript',
          score: 99,
          a: '<a href="javascript:;" class="del">删除</a>&nbsp;&nbsp;&nbsp;<a href="javascript:;" class="edit">编辑</a>',
        },
        {
          name: '明玉',
          subject: 'JavaScript',
          score: 88,
          a: '<a href="javascript:;" class="del">删除</a>&nbsp;&nbsp;&nbsp;<a href="javascript:;" class="edit">编辑</a>',
        },
        {
          name: '大猪蹄子',
          subject: 'JavaScript',
          score: 0,
          a: '<a href="javascript:;" class="del">删除</a>&nbsp;&nbsp;&nbsp;<a href="javascript:;" class="edit">编辑</a>',
        },
      ]
      // 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行
      var tbody = document.querySelector('tbody')
      for (var i = 0; i < datas.length; i++) {
        // 外面的for循环管行 tr
        // 1. 创建 tr行
        var tr = document.createElement('tr')
        tbody.appendChild(tr)
        // 另外用一个变量student保存当前遍历的学生对象
        var student = datas[i]
        // 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数  for循环遍历对象 datas[i]
        for (var k in student) {
          // 里面的for循环管列 td
          // 创建单元格
          var td = document.createElement('td')
          // 把对象里面的属性值 datas[i][k] 给 td
          // console.log(datas[i][k]);
          td.innerHTML = student[k]
          tr.appendChild(td)
        }

        // tr.innerHTML = `<td>${student.name}</td>
        // <td>${student.subject}</td>
        // <td>${student.score}</td>
        // <td><a href="javascript:;">删除 </a></td>
        // `
        // 3. 创建有删除2个字的单元格
        // var td = document.createElement('td');
        // td.innerHTML = '<a href="javascript:;">删除 </a>';
        // tr.appendChild(td);
      }
      // // 4. 删除操作 开始
    //   var as = document.querySelectorAll('a')
    //   for (var i = 0; i < as.length; i++) {
    //     as[i].onclick = function () {
    //       // 点击a 删除 当前a 所在的行(链接的爸爸的爸爸)  node.removeChild(child)
    //       tbody.removeChild(this.parentNode.parentNode)
    //     }
    //   }

      // 制作新增功能
      document.querySelector('#add').addEventListener('click',function(){
          // 验证所有内容不能为空

          // 将所有文本框的内容获取到
          var stuName = document.querySelector('#txtName').value
          var stuSub = document.querySelector('#subject').value
          var stuScore = document.querySelector('#score').value

          var tr = document.createElement('tr')

          tr.innerHTML = `<td>${stuName}</td><td>${stuSub}</td><td>${stuScore}</td><td>
            <a href="javascript:;" class="del">删除</a>&nbsp;&nbsp;&nbsp;
            <a href="javascript:;" class="edit">编辑</a>
        </td>`

          tbody.appendChild(tr)

          console.log(tbody)


      })

      // 利用事件委托，处理删除和编辑功能
      tbody.addEventListener('click',function( e ){
        if(e.target.className === 'del'){
            // 做删除操作
            e.target.parentNode.parentNode.remove()

        }else if(e.target.className === 'edit'){
            // 编辑
            var scoreTd = e.target.parentNode.parentNode.children[2]
            if(scoreTd.children.length == 0){
                window.score = scoreTd.innerHTML
            }else{
                return
            }
            
            // console.log(score)

            scoreTd.innerHTML = `<input type='text' value='${score}' /><button class="save">保存</button><button class="cancel">取消</button>`
        }else if(e.target.className == 'save'){
            // 点击的是保存
            // alert('保存')
            var td = e.target.parentNode;
            var value = td.children[0].value;
            td.innerHTML = value
        }else if(e.target.className == 'cancel'){
            // 点的是取消
            // alert('取消')
            var td = e.target.parentNode;
            td.innerHTML = score
        }
      })


    </script>
  </body>
</html>
